<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const city = ref('');
const obj = ref([]);
const week = ref('');
const wea = ref('');
const tem = ref('');
const win_speed = ref('');
const win = ref('');
const air_level = ref('');
const message = ref('');
const dateObj  = new Date();
// 获取日期的年、月、日
const year = dateObj.getFullYear();
const month = ('0' + (dateObj.getMonth() + 1)).slice(-2); // 月份需要加 1，且保证两位数格式
const day = ('0' + dateObj.getDate()).slice(-2); // 日期需要保证两位数格式
// 将日期格式化成 "yyyy-mm-dd" 的字符串形式
const update_time = year + '-' + month + '-' + day;

const get = (sky) => {
  return `https://xiaoxiaobaiyang.oss-cn-shenzhen.aliyuncs.com/weather/${sky}.png`;
};

onMounted(() => {
axios.get("http://v1.yiketianqi.com/api?unescape=1&version=v91&appid=22893345&appsecret=QGg2skUW&ext=&city=长沙")
      .then((response) => {
        city.value = response.data.city;
        obj.value = response.data.data;
        week.value = response.data.data[0].week;
        wea.value = response.data.data[0].wea;
        tem.value = response.data.data[0].tem;
        win_speed.value = response.data.data[0].win_speed;
        win.value = response.data.data[0].win;
        air_level.value = response.data.data[0].air_level;
        message.value = response.data.data[0].air_tips;
      })
      .catch((error) => {
        console.log('请求失败');
      });
});
</script>

<template>
  <div class="page-container">
    <div id="app">
      <nav>{{ update_time }}  {{ week }}</nav>
      <div class="hello">
        <!-- 城市信息 -->
        <h1>{{ city }}</h1>
        <h4>{{ message }}</h4>
        <h2>{{ wea }}</h2>
        <h2>{{ tem }}℃</h2>
        <div class="detail">
          <span>风力{{ win_speed }}&nbsp;|&nbsp;{{ win }}&nbsp;|&nbsp;空气质量：{{ air_level }}</span>
        </div>
        <!-- 天气列表 -->
        <ul class="list">
          <li v-for="item in obj">
            <div>
              <h3>{{ item.data }}</h3>
              <h3>{{ item.week }}</h3>
              <img :src="get(item.wea_img)" alt="" />
              <h3>{{ item.wea }}</h3>
              <h3>{{ item.tem1 }}℃-{{item.tem2}}℃</h3>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

</template>

<style scoped>
h1 {
  font-size: 40px;
  text-align: center;
  padding: 20px;
}
h2{
  font-size:30px ;
  text-align: center;
}
h4 {
  text-align: center;
  padding: 20px;
}
h3 {
  padding: 5px;
}
.detail{
  text-align: center;
  padding: 20px;
}
nav{
  display: flex;
  padding: 10px;
}
.list{
  padding-top:40px ;
  max-width: 1480px;
  margin: 0 auto;
}
li {
  float: left;
  list-style-type: none;
  width: 200px;
  text-align: center;
  margin-top:20px ;
}


.page-container{
  margin: 0;
  min-height: 100vh;
  background-color: #cce5ff;
  background-image:
      radial-gradient(closest-side,rgba(79, 172, 254, 1),rgba(0, 242, 254, 0)),
      radial-gradient(closest-side, rgb(145, 177, 180),rgba(143, 211, 244, 0)),
      radial-gradient(closest-side, rgb(44, 147, 226),rgba(51, 8, 103, 0)),
      radial-gradient(closest-side, rgb(6, 147, 197),rgba(244, 208, 63, 0)),
      radial-gradient(closest-side,rgba(112, 133, 182, 1),rgba(222, 243, 248, 0));
  background-size:
      130vmax 130vmax,
      80vmax 80vmax,
      90vmax 90vmax,
      110vmax 110vmax,
      90vmax 90vmax;
  background-position:
      -80vmax -80vmax,
      60vmax -30vmax,
      10vmax 10vmax,
      -30vmax -10vmax,
      50vmax 50vmax;
  background-repeat: no-repeat;
  animation: 2s movement linear infinite;

  body::after {
    content: '';
    display: block;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  @keyframes movement {
    0%, 100% {
      background-size:
          130vmax 130vmax,
          80vmax 80vmax,
          90vmax 90vmax,
          110vmax 110vmax,
          90vmax 90vmax;
      background-position:
          -80vmax -80vmax,
          60vmax -30vmax,
          10vmax 10vmax,
          -30vmax -10vmax,
          50vmax 50vmax;
    }
    25% {
      background-size:
          100vmax 100vmax,
          90vmax 90vmax,
          100vmax 100vmax,
          90vmax 90vmax,
          60vmax 60vmax;
      background-position:
          -60vmax -90vmax,
          50vmax -40vmax,
          20vmax -20vmax,
          -40vmax -20vmax,
          40vmax 60vmax;
    }
    50% {
      background-size:
          80vmax 80vmax,
          110vmax 110vmax,
          80vmax 80vmax,
          60vmax 60vmax,
          80vmax 80vmax;
      background-position:
          -50vmax -70vmax,
          40vmax -30vmax,
          10vmax 30vmax,
          20vmax 10vmax,
          30vmax 70vmax;
    }
    75% {
      background-size:
          90vmax 90vmax,
          90vmax 90vmax,
          100vmax 100vmax,
          90vmax 90vmax,
          70vmax 70vmax;
      background-position:
          -50vmax -40vmax,
          50vmax -30vmax,
          20vmax 30vmax,
          -10vmax 10vmax,
          40vmax 60vmax;
    }
  }

}
</style>
